<template>
    <div class="home">
        <Titlebar></Titlebar>
        <div class="content-box">
            <aside>
                <el-menu
                    default-active="2"
                    class="el-menu-vertical">
                    <el-sub-menu index="1">
                        <template #title>
                            <i class="fa fa-table" aria-hidden="true"></i>
                            &nbsp;
                            <span>查看表格</span>
                        </template>
                        <el-menu-item index="1-1" @click="goRouter('/home/workprotecttable')">劳保用品</el-menu-item>
                        <el-sub-menu index="1-2">
                            <template #title>特种作业证书</template>
                            <el-menu-item index="1-2-1" @click="goRouter('/home/lowTensionTable')">低压电工证书</el-menu-item>
                            <el-menu-item index="1-2-2" @click="goRouter('/home/highplaceTable')">高处作业证书</el-menu-item>
<!--                            <el-menu-item index="1-2-3" @click="goRouter('/home/lowTensionTable')">叉车证书</el-menu-item>-->
                        </el-sub-menu>
                    </el-sub-menu>
                    <!--这里需要判断该工班是否有填写权限-->
                    <el-sub-menu index="2" v-if="allowWrite">
                        <template #title>
                            <i class="fa fa-table" aria-hidden="true"></i>&nbsp;
                            <span>添加表格</span>
                        </template>
                        <el-menu-item index="2-1" @click="goRouter('/home/AddLabor')">劳保用品</el-menu-item>
                        <el-sub-menu index="2-2">
                            <template #title>特种作业证书</template>
                            <el-menu-item index="2-2-1" @click="goto('specialcarddy')">低压电工证</el-menu-item>
                            <el-menu-item index="2-2-2" @click="goto('specialcarddg')">高处作业证</el-menu-item>
<!--                            <el-menu-item index="2-2-3" @click="goto('specialcardcc')">通号部叉车证</el-menu-item>-->
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item v-if="staffInfo.jurisdiction>1 || (config && config.others.staffManagementShow.value)"
                                  index="3" @click="goRouter('/home/StaffManagement')">
                        <i class="fa fa-users" aria-hidden="true"></i>&nbsp;
                        <span>员工管理</span>
                    </el-menu-item>
                    <el-menu-item v-if="staffInfo.jurisdiction>1" index="4" @click="goRouter('/home/ClassWriteStatusManagement')">
                        <i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;
                        <span>权限管理</span>
                    </el-menu-item>
                    <el-menu-item v-if="staffInfo.jurisdiction>2" index="5" @click="goRouter('/home/AgingManagement')">
                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;
                        <span>时效管理</span>
                    </el-menu-item>
                </el-menu>
                <footer>
                    <div class="icon">
                        <img src="@/assets/people.png" alt="no have image">
                    </div>
                    <div>{{ staffInfo.userName }}</div>
                    <img src="@/assets/set.png" alt="no have image" @click="goRouter('/home/Config')">
                </footer>
            </aside>
            <main>
                <router-view></router-view>
            </main>
        </div>
    </div>
</template>

<script setup>
import {computed} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
const router = useRouter()
const store = useStore()


/*全局配置*/
//获取初始化配置
let config = computed(() => {return store.state.config.configObj;});
//获取职位信息
let staffInfo = computed(() => {return store.state.staffInfo;})
//允许写入的权限
let allowWrite = computed(() => {return store.state.addPermission;})
/*store异步函数*/
store.dispatch("getAddPermission");    //获取添加权限信息
store.dispatch('getPosition');    //获取职位
store.dispatch('getClass');    //获取架构
store.dispatch('getAllTables');    //获取所有表格


/**
 * 携带参数的路由跳转
 * @param tableId    表格所对应的id号
 */
function goto(tableId) {
    goRouter({path: "/home/AddLowVoltage", query: {tableId: tableId}});
    store.commit("SetAllTableId", tableId);
}

/**
 * 跳转路由
 * @param path 跳转路径(注意：有时候可能是object)
 */
function goRouter(path){
    router.push(path);
}







</script>

<style scoped lang="scss">
.home {
    height: 100%;
    width: 100%;
    background: #e8e8e9;
    .content-box {
        width: 100%;
        height: 100%;
        display: flex;
        aside {
            height: 100%;
            background: #f5f5f6;
            min-width: 200px;
            width: 200px;
            footer {
                width: 200px;
                height: 50px;
                position: absolute;
                bottom: 0;
                border-top: 1px solid #c5c5ce;
                display: flex;
                justify-content: space-evenly;
                align-items: center;

                .icon {
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;
                    background: #c5c5c5;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        height: 20px;
                        width: 20px;
                    }
                }

                img {
                    height: 20px;
                    width: 20px;
                }

                img:hover {
                    transform: rotate(360deg);
                    transition: transform 1s linear;
                }
            }
        }

        main {
            width: calc(100% - 200px);
            height: 100%;
        }
    }
}
</style>
